<!--
 * @Autor: 王琛
 * @Description: 样板卡片
 * @Copyright: 智优科技版权所有
-->
<style lang="stylus" scoped>
#sampleCard{
  width:100%;
  height:100%;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  //background-size :100%;
  background:no-repeat center center /100% ;
  &>div{
    width:100%;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px 0;
    box-sizing:border-box;
    background: rgba(0, 0, 0, 0.3);
    position:absolute;
    bottom:0px;
    left:0px
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
  }
}
</style>


<template>
  <div id="sampleCard" @click="$emit('clickStyle',props.config)" :style="{ backgroundImage:`url(/images/${props.config.imgUrl})` }">
    <div>{{ props.config.name }}</div>
  </div>
</template>


<script  setup lang="ts">
import {reactive, defineProps} from "vue";
const props = defineProps({
  config:{
    type:Object,
    default:()=>{
      return {
        "name":'自然 时尚',
        "key":"naturalFashion",
        "imageUrl":require('../idfn.png')
      }
    }
  }
});
const data = reactive({});


</script>

